<template>
    <div class="yuyue-add" v-loading="loading">
        <el-card class="box-card">
            <div slot="header" class="clearfix updt">
                <el-page-header @back="$router.go(-1)" content="编辑预约"> </el-page-header>
            </div>
            <div class="form-database-form">
                <el-form :model="form" ref="formModel" label-width="130px" status-icon validate-on-rule-change>
                    <el-form-item v-if="isRead" label="科室名" prop="keshiming"> {{ form.keshiming }} </el-form-item>

                    <el-form-item label="日期" prop="riqi" required :rules="[{required:true, message:'请填写日期'}]">
                        <el-date-picker v-model="form.riqi" type="date" :editable="false" value-format="yyyy-MM-dd" placeholder="选择日期"> </el-date-picker>
                    </el-form-item>

                    <el-form-item label="时间" prop="shijian" required :rules="[{required:true, message:'请填写时间'}]">
                        <el-select v-model="form.shijian"
                            ><el-option label="08:00-09:00" value="08:00-09:00"></el-option>
                            <el-option label="09:00-10:00" value="09:00-10:00"></el-option>
                            <el-option label="10:00-11:00" value="10:00-11:00"></el-option>
                            <el-option label="11:00-12:00" value="11:00-12:00"></el-option>
                            <el-option label="12:00-13:00" value="12:00-13:00"></el-option>
                            <el-option label="13:00-14:00" value="13:00-14:00"></el-option>
                            <el-option label="14:00-15:00" value="14:00-15:00"></el-option>
                            <el-option label="15:00-16:00" value="15:00-16:00"></el-option>
                            <el-option label="16:00-17:00" value="16:00-17:00"></el-option>
                            <el-option label="17:00-18:00" value="17:00-18:00"></el-option>
                            <el-option label="19:00-20:00" value="19:00-20:00"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="姓名" prop="xingming" required :rules="[{required:true, message:'请填写姓名'}]">
                        <el-input type="text" placeholder="输入姓名" style="width: 250px" v-model="form.xingming" />
                    </el-form-item>

                    <el-form-item label="年龄" prop="nianling" required :rules="[{required:true, message:'请填写年龄'}, {validator:rule.checkNumber, message:'输入一个有效数字'}]">
                        <el-input type="number" placeholder="输入年龄" style="width: 250px" v-model.number="form.nianling" />
                    </el-form-item>

                    <el-form-item label="性别" prop="xingbie" required :rules="[{required:true, message:'请填写性别'}]">
                        <el-select v-model="form.xingbie"
                            ><el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item
                        label="联系电话"
                        prop="lianxidianhua"
                        required
                        :rules="[{required:true, message:'请填写联系电话'}, {validator:rule.checkPhone, message:'请输入正确手机号码'}]"
                    >
                        <el-input type="text" placeholder="输入联系电话" style="width: 250px" v-model="form.lianxidianhua" />
                    </el-form-item>

                    <el-form-item
                        label="身份证"
                        prop="shenfenzheng"
                        required
                        :rules="[{required:true, message:'请填写身份证'}, {validator:rule.checkCard, message:'请输入有效身份证号码'}]"
                    >
                        <el-input type="text" placeholder="输入身份证" style="width: 250px" v-model="form.shenfenzheng" />
                    </el-form-item>

                    <el-form-item label="备注" prop="beizhu"> <el-input type="textarea" v-model="form.beizhu"></el-input> </el-form-item>

                    <el-form-item label="用户" prop="yonghu"> <el-input v-model="form.yonghu" readonly style="width: 250px"></el-input> </el-form-item>

                    <el-form-item v-if="btnText">
                        <el-button type="primary" @click="submit">{{ btnText }}</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>
<style type="text/scss" scoped lang="scss">
    .yuyue-add {
    }
</style>
<script>
    import api from "@/api";
    import rule from "@/utils/rule";
    import { extend } from "@/utils/extend";
    import formUtil from "./form";

    export default {
        name: "yuyue-add",
        data() {
            return {
                readMap: {},
                rule,
                loading: false,
                form: {},
            };
        },
        watch: {
            id: {
                handler() {
                    this.loadInfo();
                },
            },
        },
        props: {
            isRead: {
                type: Boolean,
                default: true,
            },
            btnText: {
                type: String,
                default: "提交",
            },
            id: {
                type: [String, Number],
                required: true,
            },
        },

        computed: {},
        methods: {
            submit() {
                this.$refs.formModel
                    .validate()
                    .then((res) => {
                        if (this.loading) return;
                        this.loading = true;
                        var form = this.form;

                        this.$store
                            .dispatch("yuyue/update", form)
                            .then((res) => {
                                this.loading = false;
                                if (res.code == 0) {
                                    this.$message.success("更新成功");
                                    this.$router.go(-1);
                                } else {
                                    this.$message.error(res.msg);
                                }
                            })
                            .catch((err) => {
                                this.loading = false;
                                this.$message.error(err.message);
                            });
                    })
                    .catch((err) => {
                        console.log(err.message);
                    });
            },
            loadInfo() {
                if (this.loading) return;
                var form = this.form;
                this.form = formUtil.createForm();

                // 更新数据,获取数据
                this.loading = true;
                this.$store
                    .dispatch("yuyue/findById", this.id)
                    .then((res) => {
                        this.loading = false;
                        this.form = res;
                        formUtil.loadInfo(res.keshiid).then((rs) => {
                            this.readMap = rs.readMap;
                        });
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                        this.$router.go(-1);
                    });
            },
        },
        created() {
            this.loadInfo();
        },
        mounted() {},
        destroyed() {},
    };
</script>
